<template>
    <div>
        <div class="back-img">
            <div class="top-nav"><topHeade></topHeade></div>
        </div>
        <div class="first-box">
            <h3>最新资讯</h3>
            <p class="title-p">THE LATEST INFORMATION</p>
            <div  v-loading="loading3" class="loading" v-if="loadingShow"></div>
            <ul class="product-ul">
                <router-link  :to="{path:'/detail',query:{id:item.id,index:3,title:1}}" tag="li" class="first-li" v-for="(item,index) in newsList" :key="index">
                    <div class="new-img"><img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt=""></div>
                    <div class="small-title">{{item.category}}</div>
                    <h4>{{item.name}}</h4>
                    <p>{{item.author}}</p>
                </router-link>
            </ul>
        </div>
        <div class="foot"><bottomFoot></bottomFoot></div>
    </div>
</template>

<script>
    import bottomFoot from "../../components/bottomFoot";
    import indexMinxin from "../../mixin";
    import {getNewsList} from "../../api";

    export default {
        name: "news",
        data(){
            return{
                newsList:"",
             loadingShow:true,
                loading3:true,
            }
        },
        components:{
            bottomFoot
        },
        mixins:[indexMinxin],
        created() {
            this.modifyIndex(3)
            getNewsList ().then(res=>{
                // console.log(res.rows)
                this.newsList=res.rows
                this.loading3=false
                this.loadingShow=false
            })
        },
    }
</script>

<style scoped lang="less">
    .top-nav{
        background: black;
    }
    .back-img{
        height: 854px;
        background-image: url("../../assets/newsImg/newsbanner.jpg");
        background-position: center;
        background-repeat: no-repeat;
    }
    .first-box{
        width: 1200px;
        margin:25px auto;
        h3{
            text-align: center;
        }
        .title-p{
            text-align: center;
            font-size: 22px;
            font-weight: 500;
            margin: 10px 0;
        }
        ul{
            /*display: flex;*/
            width: 1200px;
            overflow: hidden;
        }
        li{
            float: left;
            width: 590px;
            height: 581px;
        }
        .first-li{
            margin-right: 10px;
        }

        img{
            width: 100%;
        }
    }
    .product-ul{
        margin-top: 50px;
        h4{
            margin: 10px 0;
        }
        p{
            margin-top: 15px;
            font-size: 16px;
            color: #666;
        }
    }
    .second-box{
        width: 1200px;
        margin: auto;
        h3{
            text-align: center;
        }
        .title-p{
            text-align: center;
            font-size: 22px;
            font-weight: 500;
            margin: 10px 0;
        }
        ul{
            display: flex;
        }
        li{
            margin-right: 15px;
            width: 297px;
        }
        .first-li{
            margin-right: 10px;
        }

        img{
            width: 100%;
        }
    }
    .product-ul{
        h4{
            margin: 10px 0;
        }
    }
    .bottom-p{
        margin-top: 15px;
        font-size: 13px;
        color: #666;
        width: 277px;
        height: 54px;
        display: -webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .big-ul{
        margin-top: 20px;
    }
    .foot{
        margin-top: 40px;
    }
    li>div{
        overflow: hidden;
    }
    img:hover{
        transition: 0.5s;
        transform: scale(1.1,1.1);
    }
    .small-title{
        margin: 10px 0;
        color: #666;
        font-size: 14px
    }
    .top-nav{
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    .new-img{
        width: 560px;
        height: 380px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .loading{
        height: 10px;
        margin-top: 20px;
    }
</style>